<template>
  <div class="p-2">
    <Card title="说明">
      <li><span class="colorSpan">卡片列表:</span> 分页相关</li>
      <li><span class="colorSpan">搜索列表:</span> 点赞、评论、搜索相关</li>
      <li><span class="colorSpan">详情列表:</span> 使用Description 组件</li>
    </Card>
    <Card>
      <div style="height: 100%;">
        <a-tabs defaultActiveKey="base">
          <a-tab-pane tab="标准列表" key="base" forceRender style="position: relative">
            <BasicTab />
          </a-tab-pane>
          <a-tab-pane tab="卡片列表" key="card">
            <CardTab />
          </a-tab-pane>
          <a-tab-pane tab="搜索列表" key="search">
            <SearchTab />
          </a-tab-pane>
          <a-tab-pane tab="详情列表" key="desc">
            <DescTab />
          </a-tab-pane>
        </a-tabs>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { provide, ref } from 'vue';
import { Card, Row, Col, Spin } from 'ant-design-vue';
import './common/common.less';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

import BasicTab from './list/lbasic.vue';
import CardTab from './list/lcard.vue';
import SearchTab from './list/lsearch.vue';
import DescTab from './list/ldesc.vue';

</script>
